<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<el-row :gutter="25">
					<el-col :span="4">
						<el-form-item label="承租户：" prop="Renter">
							<el-input v-model="listQuery.Renter"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="合同编号：" prop="ContractID">
							<el-input v-model="listQuery.ContractID"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="欠租起始账期：" prop="startTime">
							<el-date-picker v-model="listQuery.startTime" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="管片：" prop="BlockGroup">
							<el-select v-model="listQuery.BlockGroup">
								<div v-for="(item,index) in gpList" :key="index">
									<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="所号：" prop="BlockNO" label-width="150px">
							<el-select v-model="listQuery.BlockNO">
								<div v-for="(item,index) in blList" :key="index">
									<el-option :label="item.blockno" :value="item.blockno" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="过期天数：" prop="days">
							<el-date-picker v-model="listQuery.days" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>	
					<el-col :span="6">
						<el-form-item label="是否已催收：" prop="isCS">
							<el-select v-model="listQuery.isCS">
								<el-option label="未催收" value="0" key="0"></el-option>
								<el-option label="已催收" value="1" key="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<div>
							<el-button size="mini" type="primary" @click="cxSumbit">查询</el-button>
							<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="duanxincuishou('催收')">统一短信催收</el-button>
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="承租人" prop="renter">
				</el-table-column>

				<el-table-column align="center" label="手机号码" prop="mobile">
				</el-table-column>

				<el-table-column align="center" label="管片" prop="blockGroup">
				</el-table-column>

				<el-table-column align="center" label="所号" prop="blockNo">
				</el-table-column>

				<el-table-column align="center" label="合同编号" prop="contractID">
				</el-table-column>
<!-- 
				<el-table-column align="center" label="合同状态" prop="phone">
				</el-table-column> -->

				<el-table-column align="center" label="计租面积" prop="afterArea">
				</el-table-column>


				<el-table-column align="center" label="操作" width="240">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="duanxincuishou(scope.row)">短信催收</el-button>
						<el-button type="text" size="mini" @click="shangmencuishou(scope.row.id)">上门催收</el-button>
						<el-button type="text" size="mini" @click="cuishouxiangqing(scope.row.id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
			  <el-pagination
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange"
			    :current-page="listQuery.pageNum"
			    background
			    :page-sizes="[10, 20, 50, 100]"
			    :page-size="listQuery.pageSize"
			    layout="total, sizes, prev, pager, next, jumper"
			    :total="total"
			    small
			  ></el-pagination>
			</div>
		</div>


<!-- 上门催收 -->
		<el-dialog title="上门催收" :visible.sync="shangmencuishouVisible" width="50%" :before-close="handleClose"
			style="margin-top: 20px;">
			<el-form :model="addQuery" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-form-item label="上门日期：" prop="smTime">
					<el-date-picker v-model="addQuery.smTime" type="date" placeholder="年/月/日">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="沟通结果说明：" prop="smContent">
					<el-input v-model="addQuery.smContent"></el-input>
				</el-form-item>
				<el-form-item label="文件名称：" prop="floorcount">
					<div style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">文件上传
					</div>
					<!-- <div v-else style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">查看文件</div> -->
				</el-form-item>
			</el-form>
		
		
			<div class="saveContent">
				<el-button type="primary" @click="smTijiao" size="medium">提交</el-button>
			</div>
		
		</el-dialog>
		
		
		
			
		<!-- 短信催收 -->
		<el-dialog title="短信催收" :visible.sync="duanxincuishouVisible" width="50%" :before-close="handleClose"
			style="margin-top: 20px;">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-form-item label="短信催收：" prop="AName">
					<el-input v-model="listQuery.AName"></el-input>
				</el-form-item>
				
			</el-form>
		
		
			<div class="saveContent">
				<el-button type="primary" @click="duanxincuishouVisible = false" size="medium">发送</el-button>
			</div>
		
		</el-dialog>
		
		<!-- 详情 -->
		<el-dialog title="催收详情" :visible.sync="xiangqingVisible" width="80%" :before-close="handleClose"
			style="margin-top: 0px;">
			<el-form :model="detail" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="160px">
				
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;">欠租情况</div>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="承租人：" prop="renter">
							<el-input v-model="detail.renter"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="手机号码：" prop="mobile">
							<el-input v-model="detail.mobile"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="管片：" prop="blockGroup">
							<el-input v-model="detail.blockGroup"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="所号：" prop="blockNo">
							<el-input v-model="detail.blockNo"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="合同编号：" prop="contractID">
							<el-input v-model="detail.contractID"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="合同状态：" prop="buildingarea">
							<el-input v-model="shenheQuery.buildingarea"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="计租面积：" prop="afterArea">
							<el-input v-model="detail.afterArea"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="欠租起始账期：" prop="startTime">
							<el-input v-model="detail.startTime"></el-input>
						</el-form-item>
					</el-col>
				<!-- 	<el-col :span="6">
						<el-form-item label="欠租期数：" prop="sellway">
							<el-input v-model="detail.sellway"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="欠租金额：" prop="structuredetail">
							<el-input v-model="detail.structuredetail"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="逾期天数：" prop="days">
							<el-input v-model="detail.days"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;">短信催收情况</div>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="发送时间：" prop="msTime">
							<el-input v-model="detail.msTime"></el-input>
						</el-form-item>
					</el-col>
				<!-- 	<el-col :span="6">
						<el-form-item label="发送方式：" prop="estateidno">
							<el-input v-model="detail.estateidno"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="发送内容：" prop="msContent">
							<el-input v-model="detail.msContent"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="color: blueviolet;font-weight: bold;margin-left: 20px;">上门催收情息</div>
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item label="上门日期：" prop="smTime">
							<el-input v-model="detail.smTime"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="沟通结果：" prop="smContent">
							<el-input v-model="detail.smContent"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="文件名称：" prop="floorcount">
							<div style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">查看文件</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		
		
			<div class="saveContent">
				<el-button v-if="type==3" type="primary" @click="xiangqingVisible = false" size="medium">返回</el-button>
				<el-button v-else type="primary" @click="xiangqingVisible = false" size="medium">保 存</el-button>
			</div>
		
		</el-dialog>	
		
		<!-- 扫描件上传组件 -->
		<managementFileUpload :visible.sync='uploadDialogVisible' :ImgUpload='fileList' @close='uploadClose' @confirm='uploadConfirm' />
	
	</div>
</template>

<script>
	import dayjs from 'dayjs'
import {
	csPage,
	updCsData,
	csData
} from '@/api/management'
	import {
		blockGroupList,
		blockList
	} from '@/api/industry'
	import FileUpload from '@/components/FileUpload.vue';
	import managementFileUpload from '@/components/managementFileUpload.vue';
	export default {
		name: "managementjinghuguanli",
		components: {
			FileUpload,
			managementFileUpload
		},
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					Renter: "",
					ContractID: "",
					startTime: "",
					BlockGroup: "",
					BlockNO: "",
					days:'',
					isCS:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [{
					userId: 0,
					userName: "吴晓华",
					userStatus: "0",
					phone: "13807300130",
					remarks: "此角色为测试角色",
					roleId: "1",
					deptId: "1",
				}, ],
				listLoading: false,
				dialogVisible: false,
				formData: {
					userId: "",
					userName: "",
					phone: "",
					deptId: "",
					roleId: "",
					userStatus: "1",
					remarks: "",
				},
				detail: {
					renter: "",
					contractID: "",
					startTime: "",
					blockGroup: "",
					blockNo: "",
					days:'',
					isCS:'',
					mobile:'',
					smPic:'',
					smTime:'',
					smContent:'',
					msContent:'',
					msTime:''
				},
				addQuery:{
					renter: "",
					contractID: "",
					startTime: "",
					blockGroup: "",
					blockNo: "",
					days:'',
					isCS:'',
					mobile:'',
					smPic:'',
					smTime:'',
					smContent:'',
					msContent:'',
					msTime:'',
					id:''
				},
				shenheQuery: {},
				type: '',
				dialogName:'',
				duanxincuishouVisible:false,
				yinhangxinxi:false,
				shangmencuishouVisible:false,
				uploadDialogVisible:false,
				xiangqingVisible:false,
				gpList:[],
				blList:[],
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				fileList:[],
				id:''
			};
		},

		computed: {
			deptName() {
				return (val) => {
					if (val == "1") {
						return "事业部";
					}
					return "生活部";
				};
			},
		},

		mounted() {
			this.blockGroupList()
			this.blockList()
			this.csPage()
		},

		methods: {
			cxSumbit(){
				this.csPage()
			},
			csPage(){
				this.listQuery.startTime = this.listQuery.startTime ? dayjs(this.listQuery.startTime).format('YYYY-MM-DD HH:mm:ss') : ''
				this.listQuery.days = this.listQuery.days ? dayjs(this.listQuery.days).format('YYYY-MM-DD HH:mm:ss') : ''
				csPage(this.listQuery).then(res=>{
					console.log(res)
					this.total = res.data.total
					this.list = res.data.list
				})
			},
			// 管片列表
			blockGroupList() {
				let data = {
					pageNum: 1,
					pageSize: 9999999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.gpList = res.data.list
					this.listLoading = false
				})
			},
			blockList() {
				let data = {
					limit: 99999,
					page: 1
				}
				blockList(data).then((res) => {
					this.blList = res.data.list
				})
			},
			smTijiao(){
				this.addQuery.smTime = this.addQuery.smTime ? dayjs(this.addQuery.smTime).format('YYYY-MM-DD HH:mm:ss') : ''
		
				updCsData(this.addQuery).then(res=>{
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.shangmencuishouVisible = false
				})
			},
			shenheButton(type) {
				this.shenheName = type
			},
			handleSizeChange(val) {
    	this.listQuery.pageNum = 1
    	this.listQuery.pageSize = val
				this.csPage();
			},
			handleCurrentChange(val) {
			this.listQuery.pageNum = val
				this.csPage();
			},

			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},

			duanxincuishou(){
				this.duanxincuishouVisible = true
			},
			shangmencuishou(id){
				this.addQuery.id = id
				
				let data = {
					id:id
				}
				csData(data).then(res=>{
					this.addQuery = res.data
				})
				this.shangmencuishouVisible = true
			},
			cuishouxiangqing(id){
				let data = {
					id:id
				}
				csData(data).then(res=>{
					this.detail = res.data
				})
				this.xiangqingVisible = true
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.formData = {
						...currentData
					};
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			
			// 扫描件上传
			handleUploadScan() {
				this.uploadDialogVisible = true;
			},
			uploadClose() {
				this.uploadDialogVisible = false
			},
			uploadConfirm(fileList) {
				let smPic = []
				fileList.forEach((item, index) => {
					smPic.push(item.response.data.url)
				})
				this.addQuery.smPic = JSON.stringify(fileList)
				this.uploadDialogVisible = false
				this.fileList = fileList
			}
		},
	};
</script>
<style scoped>
	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.xinxi {
		display: flex;
		width: 800px;
	}

	.goufangContent {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		background-color: #F7F7F7;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	/deep/.el-input__inner {
		height: 30px !important;
		line-height: 30px !important;
	}

	/deep/.el-form-item__label {
		height: 30px !important;
	}

	/dee/.el-date-editor {
		width: 120px !important;
	}
</style>